import React, { useState } from "react";

/* 注意：1- hooks只允直接放置到函数组件中运行，或自定义的hooks函数中
注意：2- 更新状态时，如果状态是一个引用类型，必须要保证更新的数据状态是一个全新的引用地址。
以下有异常：
React Hook "React.useState" cannot be called at the top level.
    React Hooks must be called in a React function component or
a custom React Hook function
const [num,setNum] = React.useState(1); */
export default function App(props) {
  const [num, setNum] = useState(1);
  const [arr, setArr] = useState([1, 2, 3, 4]);
  // 以下程序有异常
  // function my(){
  //     const [userName,setUserName] = useState("zhangsan");
  // }
  //

  // 自定义hook函数（函数的名字以use开头）
  function useMy() {
    const [userName, setUserName] = useState('zhangsan');
  }
  return (
    <div>
      <div>
        <h3>App</h3>
        <button onClick={() => { setNum(2) }}>{num}</button>
        <button onClick={() => {
              // 1- 以下程序不会重新执行函数（不会更新视图）
                // arr.push(arr.length+1)
                // setArr(arr)
            // 2- 传入的是一个新的引用地址，可以更新视图
          setArr([
            ...arr,
            arr.length+1
          ])
        }}>为数据添加元素</button>
        <p>{arr}</p>
      </div>
    </div>
    );
}
